<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./echarts(1).js"></script>
    <script>
        let myChart = echarts.init(document.getElementById('main'));

        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };



        // 2、指定图表的配置项和数据
        let option1 = {
            legend: {},


            // X轴配置(x轴文字、x轴轴线、x轴刻度...... )
            xAxis: {
                // show: false,
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                name: '线形图'
            },
            {
                data: [22, 333, 111, 222, 444, 666, 777],
                type: 'bar',
                name: '饼状图'
            }],
            grid: {
                show: true
            },
            title: {
                text: '标题'
            },
            tooltip: {
                padding: 20
            },
            legend: {
                data: ['线形图']
            },
            color: ['red', 'green']
        };

        function pieChart() {
            let myChart = echarts.init(document.querySelector('.pie'));
            let option = {};
            myChart.setOption(option);
        }

        let option2 = {
            tooltip: {
                // {a} 表示series中的name
                // {b} 表示数据中的series.data中的name
                // {c} 表示每一项的值
                // {d} 表示百分比
                formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
            },
            title: {
                text: '籍贯 Hometown',
                textStyle: {
                    color: '#6d767e' // 标题演示
                },
            },
            series: [
                {
                    name: '各地学员分布',
                    type: 'pie', // pie 表示饼图
                    radius: ['10%', '65%'], // 内外圈的半径
                    center: ['50%', '50%'], // 中心点
                    roseType: 'area', // area表示面积模式，radius表示半径模式
                    itemStyle: { // 每一项的设置
                        borderRadius: 4, // 扇形边缘圆角设置
                    },
                    data: [
                        { value: 40, name: '北京' },
                        { value: 38, name: '山东' },
                        { value: 32, name: '上海' },
                        { value: 30, name: '江苏' },
                        { value: 28, name: '河北' },
                        { value: 26, name: '山西' },
                        { value: 22, name: '河南' },
                        { value: 18, name: '辽宁' }
                    ]
                }
            ]
        };
        myChart.setOption(option);
        myChart.setOption(option1);
        myChart.setOption(option2);
    </script>
</body>

</html>